
function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g,'&gt;').replace(/"/g, '&quot;');
}

function resetPanelSwitches() {
    $('#header').prop('checked', true);
    $('#icon').prop('checked', true);
    $('#minimize').prop('checked', true);
    $('#close').prop('checked', true);
    $('#padding').prop('checked', true);
    $('#guideline').prop('checked', true);
    $('#sticky-guideline').prop('checked', true);
    $('#footer').prop('checked', true);
}


$(function(){

    // pretty print
    prettyPrint();
    
    // initialize switches
    $('.switch').bootstrapSwitch({
        size: 'small'
    });
    
    // reset switches
    resetPanelSwitches();
    
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        
//        e.target // activated tab
//        e.relatedTarget // previous tab
        
        var code = $.trim( htmlEntities( $('#panel-container').html() ) );
        
        $('#pretty-code').removeClass('prettyprinted');
        $('#pretty-code').html( code );

        prettyPrint();

    });
    
    
    $('#header').on('switchChange.bootstrapSwitch', function(event, state) {
        if (state) {
            
            var icon = $('#icon').bootstrapSwitch('state') ? '<i class="fa fa-list-alt"></i> ' : '';
            var bold = $('#bold').bootstrapSwitch('state') ? ' bold' : '';

            $('<div class="panel-heading' +bold+ '">\n\t<h2 class="panel-title">' +icon+ 'Panel</h2>\n\t</div>').insertBefore('#panel-container .panel-body');
//            $('#panel-container .panel').prepend( '\n\t<div class="panel-heading' +bold+ '">\n\t\t<h2 class="panel-title">' +icon+ 'Panel</h2>\n\t</div>' );
        } else {
            $('#panel-container .panel-heading').remove();
        }
    });
    
    $('#icon').on('switchChange.bootstrapSwitch', function(event, state) {
        if (state) {
//            $('<i class="fa fa-list-alt"></i>').insertBefore('#panel-container ');
            $('#panel-container h2').prepend( '<i class="fa fa-list-alt"></i> ' );
        } else {
            $('#panel-container h2 .fa').remove();
        }
    });
    
    $('#bold').on('switchChange.bootstrapSwitch', function(event, state) {
        if (state) {
//            $('<i class="fa fa-list-alt"></i>').insertBefore('#panel-container ');
            $('#panel-container .panel-heading').addClass('bold');
        } else {
            $('#panel-container .panel-heading').removeClass('bold');
        }
    });
    
    $('#padding').on('switchChange.bootstrapSwitch', function(event, state) {
        if (state) {
            $('#panel-container .panel-body').removeClass('no-padding');
        } else {
            $('#panel-container .panel-body').addClass('no-padding');
        }
    });
    
    $('#guideline').on('switchChange.bootstrapSwitch', function(event, state) {
        if (state) {
            
            var sticky = $('#sticky-guideline').bootstrapSwitch('state') ? ' guideline-sticky ' : ' ';
            
            $('#panel-container .panel-body').prepend('<div class="guideline' +sticky+ 'bg-info"><i class="fa fa-info-circle fa-lg"></i> Panel Guideline Goes Here.</div>');
            $('.guideline-setting').slideDown();
        } else {
            $('#panel-container .guideline').remove();
            $('.guideline-setting').slideUp();
        }
    });
    
    $('#sticky-guideline').on('switchChange.bootstrapSwitch', function(event, state) {
        if (state) {
            $('#panel-container .guideline').addClass('guideline-sticky');
        } else {
            $('#panel-container .guideline').removeClass('guideline-sticky');
        }
    });
    
    $('#footer').on('switchChange.bootstrapSwitch', function(event, state) {
        if (state) {
            $('#panel-container .panel').append( '<div class="panel-footer">\n\t\t<div class="align-center">\n\t\t\tFooter\n\t\t</div>\n\t</div>' );
        } else {
            $('#panel-container .panel-footer').remove();
        }
    });
    
    $('#size').change(function() {
        $('#panel-container .panel').removeClass('panel-small panel-medium panel-large');
        $('#panel-container .panel').addClass( $(this).val() );
    });
    
    $('#state').change(function() {
        $('#panel-container .panel').removeClass('panel-default panel-primary panel-success panel-info panel-warning panel-danger');
        $('#panel-container .panel').addClass( $(this).val() );
    });
});

